<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>旋转按钮</title>
    <style>
        h1 {
            font-size: 20px;
            font-weight: bold;

        }

        li {
            list-style: none;
            float: left;
            margin: 10px;
        }

        li a:hover img{
            cursor: pointer;
            /*transform: rotate(270deg);*/
            /*transform: scale(1.2);*/
            transform: rotate(36000deg) scale(1.8);
            transition: all 30s ease 0.5s;
        }


        .clear:after {
            display: block;
            height: 0;
            content: '';
            clear: both;
        }
        @media screen and (max-width: 800px) {
            /*#d1 img {*/
            /*    transform: rotate(36000deg) scale(1.8);*/
            /*    transition: all 30s ease 0.5s;*/
            /*}*/
            li a img{
                transform: rotate(36000deg) scale(1.8);
                transition: all 30s ease 0.5s;
            }
        }
    </style>
</head>
<body>
<h1>顺时针旋转10圈，放大1.8倍</h1>
<ul class="clear">
    <li><a href="#"><img src="images/rss.png"></a></li>
    <li><a href="#"><img src="images/delicious.png"></a></li>
    <li><a href="#"><img src="images/facebook.png"></a></li>
    <li><a href="#"><img src="images/twitter.png"></a></li>
    <li><a href="#"><img src="images/yahoo.png"></a></li>
    <li><a id="d1" href="#"><img src=""></a></li>
</ul>
</body>
</html>